<template>
    <div v-bind:class="[showShade === true ? 'activeShade' : '', 'pdetail']" @tap="closeShade" >

      <div class="ptitle">{{pdetail.title}}</div>
      <div class="pinfo">
        <span class="catname">{{pdetail.catname}}</span>
        <span class="price" v-if="pdetail.price">￥{{pdetail.price}}</span>
      </div>
      <wxParse :content="pdetail.content" :imageProp="{lazyLoad: true}" />
      <div class="uc" id="pl">
        <span class="read_count">
          <img src="/static/images/icon/liu.png" alt="">
          <i>{{pdetail.read_count}}</i>
          </span>
        <span v-if="upvoteStatus" @tap="upvote" class="upvote_count upvote_s">
          <img src="/static/images/icon/zans.png" alt="">
          <i>{{pdetail.upvote_count}}</i>
        </span>
        <span v-else @tap="upvote" class="upvote_count">
          <img src="/static/images/icon/zan.png" alt="">
          <i>{{pdetail.upvote_count}}</i>
        </span>
      </div>
      <p-share ref="share"></p-share>
      <p-comments></p-comments>
      <c-footer v-on:shareToMoments="shareToMoments"></c-footer>
      <p-login></p-login>
       
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { showSuccess, showError } from "@/utils/index";
import wxParse from "qs-mpvue-wxparse";
import cFooter from "../../components/footer";
import pLogin from "../../components/login";
import pComments from "../../components/comments";
import pShare from "../../components/share";
export default {
  components: {
    wxParse,
    cFooter,
    pLogin,
    pComments,
    pShare
  },
  data() {
    return {
      upvoteStatus: false,
      id: 0,
      height: ""
    };
  },

  computed: {
    ...mapState(["pdetail", "showShade"])
  },
  methods: {
    closeShade() {
      this.$store.state.showShade = false;
    },
    shareToMoments(title, image) {
      //调用share组件中的方法
      this.$refs.share.shareToMoments(title, image);
    },
    ...mapActions(["pDetail", "upvoteProduct", "readUpvote"]),
    async getPDetail(id) {
      await this.pDetail(id);
    },
    async upvote() {
      const result = await this.upvoteProduct(this.id);
      if (result.status === 1) {
        this.upvoteStatus = true;
        this.$store.state.pdetail.upvote_count += 1;
      } else if (result.status === 2) {
        showError("已经点过赞了!");
      } else {
        showError("您还没有登陆!");
        this.$store.state.actionSheetShow = true;
      }
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function(res) {
    if (res.from === "button") {
      // // 来自页面内转发按钮
      // console.log(res.target)
    }
    // return {
    //   title: '自定义转发标题',
    //   path: '/page/user?id=123'
    // }
  },
  onUnload() {
    //页面卸载时一定要将详情中的内容清空，否则进入下个详情页面会突然出现上个文章里面的内容，从而出现抖动
    this.closeShade();
    this.$store.state.pdetail = {};
    this.$store.state.commentsList = [];
  },
  async mounted() {
    this.id = this.$root.$mp.query.id;
    const result = await this.readUpvote(this.id);
    if (result.data.isUpvote === 1) {
      this.upvoteStatus = true;
    } else if (result.data.isUpvote === 0) {
      this.upvoteStatus = false;
    }
    this.getPDetail(this.id);
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/varibles.scss";
@import "@/styles/mixins.scss";
@import "~qs-mpvue-wxparse/src/wxParse.css";
page {
  background: #fff;
}
.activeShade {
  background-color: rgba(0, 0, 0, 0.4) !important;
  z-index: 9;
}

.pdetail {
  padding: 20rpx;
  padding-bottom: 140rpx;
  .ptitle {
    padding: 10rpx 20rpx;
    font-weight: bold;
    font-size: $fontSize6;
    border-bottom: 1rpx solid $borderColor;
  }
  .pinfo {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    span {
      margin: 0 20rpx;
    }
    .catname {
      @include btn1(#0cdc8c);
    }
    .price {
      @include btn1(#ff5656);
    }
  }
  .uc {
    span {
      position: relative;
      @include btn2(#fff);
      margin: 0 20rpx;
      vertical-align: top;
      i {
        display: inline-block;
        color: #7c7c7c;
      }
    }
    .upvote_s {
      border: 1rpx solid #ff5656;
      i {
        color: #ff5656;
      }
    }
    span img {
      width: 40rpx;
      height: 40rpx;
      padding-top: 10rpx;
    }
  }
}
</style>
